import React, { useState, useEffect } from 'react'
import { Col, Form, Input, Button, Tabs, Row, Select, Table, Avatar, Modal, DatePicker, Switch, Radio } from 'antd'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import RenderButtom from '@/components/RenderButton'
import SearchBox from '@/components/SearchBox'
import { router } from 'umi'
import { getCatList, getBrandInfo, updataInfo } from '@/services/goodCenter/goodsManage/addGoodsBrand'
import UploadPic from '@/components/UploadPic'

const { TextArea } = Input

const AddGoodsBrand = props => {
  const { form } = props
  const { getFieldDecorator } = form
  const [total, setTotal] = useState(1)
  const [pageNo, setPageNo] = useState(1)
  const [pageSize, setPageSize] = useState(10)
  const [record, setRecord] = useState({})
  const [brandInfo, setBrandInfo] = useState({})
  const [catList, setCatList] = useState([])
  const [brandId, setBrandId] = useState(null)

  const rowSelection = {
    type: 'radio',
    onChange: (selectedRowKeys, selectedRows) => {
      setRecord(selectedRows)
      // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
      console.log(record)
    },
  }

  useEffect(() => {
    init()
  }, [])
  const init = async () => {
    let id = props.location.query.brandId
    if (id) {
      setBrandId(id)
      await getBrandInfos(id)
    }
  }
  // 表单查询
  const handleSearch = e => {
    e.preventDefault()
    form.validateFields(async (err, values) => {
      console.log('Received values of form: ', values)
    })
  }
  // 表单清空
  const handleReset = e => {
    form.resetFields();
  }
  // 查询条件
  const getFields = () => {
    return (
      <Row gutter={24}>
        <Col span={24}><Button type="primary" onClick={goBack}>返回</Button></Col>
        <Col span={12}>
          <Form.Item label="品牌中文名称" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('nameCn', {
              initialValue: brandInfo.resGoodsBrand ? brandInfo.resGoodsBrand.nameCn : ''
            })
              (<Input placeholder="请输入品牌中文名称" />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="品牌英文名称" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('nameEn', {
              initialValue: brandInfo.resGoodsBrand ? brandInfo.resGoodsBrand.nameEn : ''
            })
              (<Input placeholder="请输入品牌英文名称" />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="品牌网址" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('brandUrl', {
              initialValue: brandInfo.resGoodsBrand ? brandInfo.resGoodsBrand.brandUrl : ''
            })
              (<Input placeholder="请输入品牌网址" />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="品牌LOGO" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('logo', {})(
              <UploadPic
                maxLoad={1}
                imageUrl={brandInfo.resGoodsBrand ? brandInfo.resGoodsBrand.logo : ''}
                action="/Amaidan-Goods-Web/common/uploadImage"
                onRemove={file => {}}
              />
            )}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="品牌专区大图" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('bigImg', {})(
              <UploadPic
                maxLoad={1}
                imageUrl={brandInfo.resGoodsBrand ? brandInfo.resGoodsBrand.bigImg : ''}
                action="/Amaidan-Goods-Web/common/uploadImage"
                onRemove={file => {}}
              />
            )}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="品牌背景图" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('bgImg', {})(
              <UploadPic
                maxLoad={1}
                imageUrl={brandInfo.resGoodsBrand ? brandInfo.resGoodsBrand.bgImg : ''}
                action="/Amaidan-Goods-Web/common/uploadImage"
                onRemove={file => {}}
              />
            )}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="品牌描述" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('brandDesc', {
              initialValue: brandInfo.resGoodsBrand ? brandInfo.resGoodsBrand.brandDesc : ''
            })
              (<TextArea placeholder="请输入品牌描述" />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="商品分类" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('catId', {})
              (<Select
                style={{ width: '100%' }}
                showSearch
                filterOption={(input, option) => option.props.children.indexOf(input) >= 0}
                placeholder="请选择"
              >
                {catList && catList.map(r => <Option key={r.id} value={r.id}>{r.name}</Option>)}
              </Select>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="已绑定的分类" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('catName', {
              initialValue: brandInfo.goodsCatOne ? brandInfo.goodsCatOne[0].catName : ''
            })
              (<Input placeholder="请输入已绑定的分类" />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="排序" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('sort', {
              initialValue: brandInfo.resGoodsBrand ? brandInfo.resGoodsBrand.sort : ''
            })
              (<Input placeholder="请输入排序" />)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="是否显示" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('isShow', {
              initialValue: brandInfo.resGoodsBrand ? brandInfo.resGoodsBrand.isShow : ''
            })
              (<Radio.Group>
                <Radio value={'1'}>是</Radio>
                <Radio value={'0'}>否</Radio>
              </Radio.Group>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="加入推荐" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('joinIntroduce', {
              initialValue: brandInfo.resGoodsBrand ? brandInfo.resGoodsBrand.joinIntroduce : ''
            })
              (<Radio.Group>
                <Radio value={'1'}>是</Radio>
                <Radio value={'0'}>否</Radio>
              </Radio.Group>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="免除扣点手续费" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('isDeductionPoundage', {
              initialValue: brandInfo.resGoodsBrand ? brandInfo.resGoodsBrand.isDeductionPoundage : ''
            })
              (<Radio.Group>
                <Radio value={'1'}>是</Radio>
                <Radio value={'0'}>否</Radio>
              </Radio.Group>)}
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item label="扣点率" labelCol={{ span: 4 }} wrapperCol={{ span: 20 }} >
            {getFieldDecorator('deductionRate', {
              initialValue: brandInfo.resGoodsBrand ? brandInfo.resGoodsBrand.deductionRate : ''
            })
              (<Input placeholder="请输入扣点率" />)}
          </Form.Item>
        </Col>
      </Row>
    )
  }
  // 按钮处理
  const handleBtn = async type => {
    console.log(type)
  }

  // 获取商品分类
  const getCatLists = async () => {
    let res = await getCatList()
    if (res.code === '0') {
      setCatList(res.data)
    } else {
      alert(res.msg)
    }
  }
  // 获取品牌信息
  const getBrandInfos = async (id) => {
    let params = {
      id
    }
    let res = await getBrandInfo(params)
    if (res.code === '0') {
      setBrandInfo(res.data)
    } else {
      alert(res.msg)
    }
  }
  // 返回按钮
  const goBack = () => {
    props.history.goBack(-1)
  }
  // 更新信息
  const updataInfos = () => {
    form.validateFields(async (err, values) => {
      console.log('Received values of form: ', values)
      let params = {
        listCatId: [values.catId ? values.catId : brandInfo.resBrandRefCat[0].catId],
        resGoodsBrand: {
          ...brandInfo.resGoodsBrand,
          ...values
        }
      }
      let res = await updataInfo(params)
      if (res.code === '0') {
        alert(res.msg)
        goBack()
      } else {
        alert(res.msg)
      }
    })
  }
  // 保存信息
  const saveInfos = () => {
    alert('请选择商品分类')
  }
  // 提交
  const submit = () => {
    if (brandId) {
      updataInfos()
    } else {
      saveInfos()
    }
  }

  return (
    <PageHeaderWrapper title="添加/修改品牌">
      <SearchBox handleReset={handleReset} handleSearch={handleSearch} getFields={getFields} />
      <RenderButtom click={handleBtn} />
      <Button type="primary" onClick={submit}>保存</Button>
    </PageHeaderWrapper>
  )
}

export default Form.create()(AddGoodsBrand)
